<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>vue-router路由</title>
        <script src="js/vue.min.js"></script>
        <script src="js/vue-router.min.js"></script>
        <style type="text/css">
            /* .router-link-active{
                color: red;
                font-size: 22px;
                text-decoration: none;
            } */
            .active{
                color: red;
                font-size: 22px;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div>
                <router-link to="/home">主页</router-link>
                <router-link to="/news">新闻</router-link>
            </div>
            <div>
                <router-view></router-view>
            </div>

        </div>
    <script>
        //1.定义模板组件
        var Home = {
            template:'<h2>我是主页</h2>'
        }
        var News = {
            template:'<h2>我是新闻</h2>'
        }
        //2.配置路由
        const routers=[
            {path:'/home',component:Home},
            {path:'/news',component:News},
            {path:'*',redirect:'/home'}//重定向
        ];
        //3.创建路由实例
        const router = new VueRouter({
            routes:routers,
            mode:'history',//更改模式，history模式点击后链接中不会有# ，默认模式hash
            linkActiveClass:'active'
        });
        new Vue({
            el:'.container',
            router:router //注册路由
        });
    </script>
    </body>
</html>